﻿<!-- 
	这里不需要具有完全的布局，因为这个页面将与Ajax解析
-->
<!-- 顶部导航栏 -->
<div class="navbar">
	<div class="navbar-inner">
		<div class="left">
			<a href="#" class="back link"> <i class="icon icon-back"></i><span>返回</span></a>
		</div>
		<div class="center sliding">
			vueform
		</div>
	</div>
</div>
<div class="pages">
	<!-- Page, data-page contains page name-->
	<div data-page="vueforms" class="page no-tabbar">
		<!-- Scrollable page content-->
		<div class="page-content">
	    <style>
	        label {
	            display: block;
	            margin-bottom: 1.5em;
	        }
	        
	        label > span {
	            display: inline-block;
	            width: 8em;
	            vertical-align: top;
	        }
	    </style>
	
	    <form v-form name="myform" @submit.prevent="onSubmit" hook="formHook">
	        
	        <div class="errors" v-if="myform.$submitted">
	            <p v-if="myform.name.$error.required">Name is required.</p>
	            <p v-if="myform.email.$error.email">Email is not valid.</p>
	        </div>      
	            <label>
	            <span>Email</span>
	            <input v-model="model.email" v-form-ctrl name="email" type="email" required />
	        </label>
	        
	        <input v-model="model.j" v-form-ctrl name="j" type="number" :min="10" required />
	        <input v-model="model.k" v-form-ctrl name="k" type="number" max="10" />    
	        
	        <input v-model="model.a" v-form-ctrl name="a" custom-validator="customValidator" placeholder="a" />
	        <input v-model="model.b" v-form-ctrl name="b" custom-validator="customValidator" placeholder="b" required />
	        <input v-model="model.c" v-form-ctrl name="c" pattern="\w\w" placeholder="c" />
	        <input v-model="model.d" v-form-ctrl name="d" pattern="\w\w" placeholder="d" required />
	        <input v-model="model.e" v-form-ctrl name="e" type="email" placeholder="e" />
	        <input v-model="model.f" v-form-ctrl name="f" type="email" placeholder="f" required />   
	        
	        <button type="submit">Submit</button>
	        
	    </form>
	
	    <pre>{{ myform | json }}</pre>
	    
	    <form name="myForm" v-form>
	        <input v-form-ctrl v-model="foobar" name="foobar" placeholder="foobar" required />
	        <input v-form-ctrl v-model="foobar2" name="foobar2" placeholder="foobar2" />
	        <input v-form-ctrl v-model="foobar3" name="foobar3" type="email"  placeholder="foobar3" required />
	        <input v-form-ctrl v-model="foobar4" name="foobar4" minlength="2" placeholder="foobar4" />
	        <input v-form-ctrl v-model="foobar5" name="foobar5" type="number" min="1" placeholder="foobar5" />
	        <button type="submit">Submit</button>
	    <pre>{{myForm | json }}</pre>
	    </form>    

		</div>
	</div>
</div>


             